<template name="BmiHeightEChart">
	<view>
		<uni-ec-canvas
			v-if="!forceUseOldCanvas"
		  class="uni-ec-canvas"
		  id="uni-ec-canvas"
		  ref="uni-ec-canvas"
		  canvas-id="uni-ec-canvas"
		  :ec="ec"
		  :forceUseOldCanvas="false"
		/>
		<uni-ec-canvas
			v-else
		  class="uni-ec-canvas"
		  id="uni-ec-canvas1"
		  ref="uni-ec-canvas1"
		  canvas-id="uni-ec-canvas1"
		  :ec="ec"
		  :forceUseOldCanvas="true"
		/>
		<view class="switch-view">
			<view>桌面版:</view>
			<u-switch size="30" @change="switchClick" active-color="#B5DB7D" v-model="forceUseOldCanvas">桌面版</u-switch>
		</view>
    </view>
</template>

<script>
	import uniEcCanvas from "../js_sdk/echarts-for-wx/uni-ec-canvas/uni-ec-canvas.vue";
	
	export default {
		components: {
		  uniEcCanvas
		},
		name: "BmiHeightEChart",
		props: {
			monthBaseValues: {
				type: Array,
				default () {
					return []
				}
			},
			
			beginIndex: {
				type: Number,
				default() {
					return 0
				}
			},
			
			endIndex: {
				type: Number,
				default() {
					return 0
				}
			},
			
			lineValues: {
				type: Array,
				default () {
					return []
				}
			},
		
			lineNames: {
				type: Array,
				default () {
					return []
				}
			},
			
			actualMonth: {
				type: Array,
				default () {
					return []
				}
			},
			
			height: {
				type: Array,
				default () {
					return []
				}
			},
			
			useOldCanvas:{
				type: Boolean,
				default () {
					return false
				}
			},
		},
		data() {
			return {
				ec: {
					option : {}
				},
				forceUseOldCanvas: false,
			}
		},
		
		created() {
			this.forceUseOldCanvas = this.useOldCanvas;
			this.initData();
		},

		methods:{
			switchClick(status) {
				console.log(status);
				console.log(this.forceUseOldCanvas);
				// this.forceUseOldCanvas = !this.forceUseOldCanvas;
				if (this.forceUseOldCanvas) {
					setTimeout(()=>{
						this.$refs['uni-ec-canvas1'].init()
						console.log('延迟加载了')
					},500) // 两秒之后延迟加载
				} else {
					setTimeout(()=>{
						this.$refs['uni-ec-canvas'].init()
						console.log('延迟加载了')
					},500) // 两秒之后延迟加载
				}
			},
			
			initData() {
				var max = 0;
				var min = 0;
				min = this.$props.lineValues[0][this.$props.beginIndex];
				
				var seriesArrayHeight = [];
				for (var index in this.$props.lineNames) {
					var series = {
						name: '',
						type: 'line',
						data: [],
						markPoint: {}
					}
					series.name = this.$props.lineNames[index];
					for (var value = this.$props.beginIndex; value < this.$props.endIndex+1; value++) {
						var item = [this.$props.monthBaseValues[value],this.$props.lineValues[index][value]]
						series.data.push(item) ;
						if (this.$props.lineValues[index][value] > max){
							max = this.$props.lineValues[index][value];
						}
					}
					seriesArrayHeight[index] = series;
				
					if (index === '0'){
						if (this.$props.actualMonth.length === 1){
							var point = {
								symbolSize: 40, //标记大小
								data:[
									{xAxis: this.$props.actualMonth[0], yAxis: this.$props.height[0]},
								]
							};
							series.markPoint = point;
						}
					}
				}
				
				if (this.$props.actualMonth.length > 1){
					var barSeries = {
						name: '身高',
						type: 'bar',
						data: [],
						label: {
							show: true,
							rotate:90,
							fontSize:8,
						}
					}
					var month0 = this.$props.actualMonth[0];
					var month1 = this.$props.actualMonth[1]; 
					if (month0 === month1){
						month1 = month0 + 1;
					}
					var item1 = [month0, this.$props.height[0]];
					var item2 = [month1,this.$props.height[1]];
					barSeries.data.push(item1) ;
					barSeries.data.push(item2) ;
					
					seriesArrayHeight[this.$props.lineNames.length] = barSeries;
				}
				
				max = 140;
				min = 50;
				// if (this.$props.height > max){
				// 	max = this.$props.height+5;
				// }
				// if (this.$props.height < min){
				// 	min = this.$props.height-5;
				// }
				max = Math.ceil(max);
				min = Math.floor(min);
				var heightOption = {
				    title: {
						text:'身高曲线',
						textStyle:{
						    fontSize:14,
						    color: '#50576a'
						},
						left:'center',
						top:0
				    },
				    tooltip: {
				        trigger: 'axis',
						axisPointer : {            // 坐标轴指示器，坐标轴触发有效
						    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						},
				    },
				    legend: {
						top: 20,
				        data: this.$props.lineNames
				    },
				    grid: {
						top: 70,
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: {
				        type: 'value',
						splitNumber: 10,
				        boundaryGap: false,
				        data: this.$props.monthBaseValues.slice(this.$props.beginIndex,this.$props.endIndex),
						min: this.$props.monthBaseValues[this.$props.beginIndex],
						max: this.$props.monthBaseValues[this.$props.endIndex],
						interval: 3,
						axisLabel:{
							formatter: '{value}月',
							rotate:45,
							fontSize:10,
						},
				    },
				    yAxis: {
				        type: 'value',
						splitNumber: 10,
						axisLabel:{
							formatter: '{value}cm',
							fontSize:10,
						},
						min: min,
						max: max,
				    },
				    series: seriesArrayHeight
				};
				console.log(heightOption);
				this.ec.option = heightOption;
				
				setTimeout(()=>{
					if (this.forceUseOldCanvas) {
						this.$refs['uni-ec-canvas1'].init()
					} else {
						this.$refs['uni-ec-canvas'].init()
					}
				},500) // 两秒之后延迟加载
			}
		}
	}
</script>

<style>
	.uni-ec-canvas {
	  width: 750upx;
	  height: 750upx;
	  display: block;
	}
	
	.switch-view{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin-right: 40rpx;
		margin-bottom: 10rpx;
	}
</style>
